﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Трансформации объектов</title>
<link rel="stylesheet" type="text/css" href="../lib/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../lib/raphael-min.js"></script>
<script type="text/javascript">
	$(function(){
		var paper = new Raphael($("#paper1")[0]);
		var rect = paper.rect(0, 0, 40, 30).attr({fill:"#ffc", stroke:"#f00"});
		var rect1 = rect.clone().attr({fill:"#fcf"});
		
		rect.attr({transform:"T25,30R45T15,60"});
		rect1.attr({transform:"T40,90R45"});
		
		console.log(rect.attr("transform"));
		console.log(rect1.attr("transform"));

	});
</script>
</head>
<body>
	<h1>Трансформации объектов</h1>
	<p>Источник: [2], стр. 52 "Basic transformations"</p>
	<p>Указания: два прямоугольника имеют разную последовательность трансформаций, но видимый результат одинаков.</p>
	<!--p>Особенности:</p>
	<ul>
		<li>используются обработчики события <span class="code">drag</span></li>
		<li>для перемещения объекта используется преобразование <span class="code">transform</span>, а не прямые присваивания координат - это позволяет однообразно перемещать любые типы фигур</li>
		<li>для сохранения текущего состояния преобразования объекта используется стандартный метод <span class="code">data()</span></li>
	</ul-->
	

	<div id="paper1" class="paper" style="width:600px; height:400px;">
	</div>
	
	<h2>Литература</h2>
	<ol>
		<li>Wilson, C. RaphaelJS Graphics and Visualization on the Web. O'Relly, 2013 г.</li>
		<li>Dawber, D. Learning RaphaelJS Vector Graphics. Packt pub., 2013 г.</li>
	</ol>
</body>
</hmtl>